<template>
  <div class="full-reduce-discount">
    <el-form-item label="优惠类型" prop="rules.type" required>
      <el-radio-group v-model="activityDetail.model.rules.type">
        <el-radio label="money">消费金额</el-radio>
        <el-radio label="num">购买件数</el-radio>
      </el-radio-group> </el-form-item
    ><template v-for="(ditem, dindex) in activityDetail.model.rules.discounts" :key="ditem">
      <el-form-item class="el-form-item--label-right">
        <el-form-item class="el-form-item__label-auto" :label="`规则${dindex + 1}`" required>
          <el-form-item
            class="el-form-item--label-left is-no-asterisk"
            label="消费满"
            :prop="'rules.discounts.' + dindex + '.full'"
            :rules="activityDetail.rules.discounts.full"
          >
            <el-input class="sa-w-120 sa-m-r-12" v-model="ditem.full" type="number">
              <template #append>
                {{ activityDetail.model.rules.type == 'money' ? '元' : '件' }}
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            class="el-form-item--label-left is-no-asterisk"
            :label="`${activityDetail.model.type == 'full_reduce' ? '优惠' : '折扣'}`"
            :prop="'rules.discounts.' + dindex + '.discount'"
            :rules="tempRules.discount"
          >
            <el-input class="sa-w-120" v-model="ditem.discount" type="number">
              <template #append>
                {{ activityDetail.model.type == 'full_reduce' ? '元' : '折' }}
              </template>
            </el-input>
            <div
              class="tip sa-m-l-12"
              v-if="activityDetail.model.rules.type == 'money' && dindex == 0"
            >
              {{
                activityDetail.model.type == 'full_reduce' ? '满减' : '满折'
              }}金额优惠按照商品实际金额计算
            </div>
            <el-button
              v-if="dindex"
              class="is-link sa-m-l-12"
              type="danger"
              @click="deleteDiscounts(dindex)"
            >
              删除
            </el-button>
          </el-form-item>
        </el-form-item>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button
        v-if="
          activityDetail.model.rules.discounts && activityDetail.model.rules.discounts.length < 5
        "
        class="is-link"
        type="primary"
        @click="addDiscounts"
        >+ 添加优惠</el-button
      >
    </el-form-item>
  </div>
</template>
<script setup>
  const props = defineProps(['activityDetail']);

  const tempRules = {
    discount: [
      {
        validator: (rule, value, callback) => {
          let index = rule.field.split('.')[2];
          if (value > 0) {
            // 满额立减
            if (props.activityDetail.model.type == 'full_reduce') {
              if (props.activityDetail.model.rules.type == 'money') {
                if (
                  Number(props.activityDetail.model.rules.discounts[index].full) <
                  Number(props.activityDetail.model.rules.discounts[index].discount)
                ) {
                  callback(new Error('规则错误'));
                }
              }
            }
            // 满额折扣
            if (props.activityDetail.model.type == 'full_discount') {
              if (Number(props.activityDetail.model.rules.discounts[index].discount) >= 10) {
                callback(new Error('规则错误'));
              }
            }
            callback();
          } else {
            callback(new Error('请输入'));
          }
        },
        trigger: 'blur',
      },
    ],
  };

  function addDiscounts() {
    props.activityDetail.model.rules.discounts.push({
      full: '',
      discounts: '',
    });
  }
  function deleteDiscounts(index) {
    props.activityDetail.model.rules.discounts.splice(index, 1);
  }
</script>
